<!-- 用户管理模块 -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px">
        <el-col :span="24">
          <el-button type="primary" @click="addTopic" size="mini" v-has="'add'"
            >添加Topic</el-button
          >
        </el-col>
      </el-row>
      <yg-table
        :columns="columns"
        :tableList="TableList"
        :loading="loadingShow"
      >
        <el-table-column slot="action" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editTopic(scope.row)"
              size="mini"
              v-has="'edit'"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              slot="reference"
              circle
              @click="delectTopic(scope.row)"
              size="mini"
              v-has="'del'"
            ></el-button>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
    <!-- 添加Topic弹窗 -->
    <el-dialog
      title="添加Topic"
      :visible.sync="addTopicDialogVisible"
      width="50%"
      @close="addTopicDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="addTopicForm"
        :formObj="addTopicFromObj"
        :formData="addTopicFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addTopicDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addTopicConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改Topic信息 -->
    <el-dialog
      title="修改Topic"
      :visible.sync="editTopicDialogVisible"
      width="50%"
      @close="editTopicDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="editTopicForm"
        :formObj="editTopicFromObj"
        :formData="editTopicFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editTopicDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editTopicConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { myStorage } from "@/utils/localStorage";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import YgHome from "@/views/home/YgHome.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "ParamTopic",
  components: {
    YgTable,
    YgFrom,
    YgHome,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false, //加载表格数据
      addTopicDialogVisible: false, //添加Topic弹窗显隐
      editTopicDialogVisible: false, //修改Topic信息
      columns: [
        {
          prop: "topic",
          label: "Topic",
          align: "left",
        },
        {
          prop: "desc",
          label: "描述",
        },
        { slot: "action" },
      ],
      TableList: [],
      addTopicFromObj: [
        {
          input: true, //是input
          label: "Topic", //字段
          prop: "topic", //字段名
          width: 12, //参考el-col
          placeholder: "请输入Topic",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入订阅名称",
              trigger: "blur",
            },
          ],
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入描述",
              trigger: "blur",
            },
          ],
        },
      ],
      addTopicFromData: {
        topic: "",
        desc: "",
      },
      editTopicFromObj: [
        {
          input: true, //是input
          label: "Topic", //字段
          prop: "topic", //字段名
          width: 24, //参考el-col
          placeholder: "请输入Topic",
          disabled: true, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入Topic名称",
              trigger: "blur",
            },
          ],
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 24, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
      ],
      editTopicFromData: {
        topic: "",
        desc: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addTopic() {
      this.addTopicDialogVisible = true;
    },
    editTopic(val) {
      this.editTopicDialogVisible = true;
      this.editTopicFromData.topic = val.topic;
      this.editTopicFromData.desc = val.desc;
    },
    delectTopic(id) {
      this.$confirm(
        `将要删除id为:${id.topic}的Topic吗？是否确定删除?`,
        "删除Topic",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1006,
            funCode: 2,
          };
          newMsg.data = { topic: id.topic };
          publishMsg(newMsg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editTopicConfirm() {
      if (this.$refs.editTopicForm.submitForm()) {
        let newMsg = {
          webMsgType: 1006,
          funCode: 3,
        };
        newMsg.data = this.editTopicFromData;
        // //console.log(this.editTopicFromData)
        publishMsg(newMsg);
        this.editTopicDialogVisible = false;
      }
    },
    editTopicDialogClose() {
      this.$refs.editTopicForm.resetForm();
    },

    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1006:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0) {
                this.$message.error(msg.retMsg);
              } else {
                this.TableList = msg.data;
                this.loadingShow = false;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("添加成功");
                }
              }
              break;
            case 2:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("删除成功");
                }
              }
              break;
            case 3:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("修改成功");
                }
              }
              break;
            default:
              break;
          }
          break;

        default:
          break;
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      if (index == "resetButton") {
        this.$refs.publicForm.resetForm();
      }
    },
    addTopicConfirm() {
      if (this.$refs.addTopicForm.submitForm()) {
        let newMsg = {
          webMsgType: 1006,
          funCode: 1,
        };
        newMsg.data = this.addTopicFromData;
        publishMsg(newMsg);
        this.addTopicDialogVisible = false;
      }
    },
    addTopicDialogClose() {
      this.$refs.addTopicForm.resetForm();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setMessageCallback(this.onMessage);
    publishMsg({
      webMsgType: 1006,
      funCode: 0,
    });
    this.loadingShow = true;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforedestroy() {}, //生命周期 - 销毁完成
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
</style>
